<template>
  <div>
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>班级名称</p>
          <el-input v-model="Api_GET_ClubClassQO.Filter" placeholder="请输入班级" clearable size="mini" @change="type()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>关联课程</p>
          <el-input v-model="Api_GET_ClubClassQO.CourseName" placeholder="请输入课程" clearable size="mini" @change="type()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>排课状态</p>
          <el-select v-model="HasScheduledCourse" size="mini" @change="type()">
            <el-option label="全部" value="" />
            <el-option label="未排课" value="false" />
            <el-option label="已排课" value="true" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>授课模式</p>
          <el-select v-model="TeachingMode" size="mini" @change="type()">
            <el-option label="全部" value="" />
            <el-option label="一对多" value="OneToMany" />
            <el-option label="一对一" value="OneToOne" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <el-button type="primary" size="mini" style="margin-left:5px;margin-top:26px" @click="type()">筛选</el-button><el-button type="warning" size="mini" style="margin-top:26px" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="nav">
      <el-button type="primary" icon="el-icon-circle-plus-outline" style="margin-bottom:15px" size="mini" @click="addGrade">新建班级</el-button>
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData" size="mini">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="班级名称" prop="name" />
        <el-table-column label="关联课程" align="center">
          <template slot-scope="{ row }">
            <span v-for="(item,index) in row.courses" :key="index">
              {{ item.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="人数/上限" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.studentCount }}</span> / <span>{{ row.maxStudentCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="addarr(row)">排课信息</el-button>
            <el-button type="text" size="mini" @click="student(row)">班级学员</el-button>
            <el-button type="text" size="mini" @click="sign(row)">签到</el-button>
            <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-button type="text" size="mini" style="color:#FF3434" @click="deleteClasss(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <editGrade ref="EditGrade" />
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubClassQO.Page"
        :page-size="Api_GET_ClubClassQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import editGrade from './editGrade.vue';
import { api_GET_ClubClass, api_DELETE_ClubClassId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubClassQO, CreateClassInput } from '@/lib/form/hall/swaggerForm';
import { mapState, mapActions } from 'vuex';
// import editGradeVue from './editGrade.vue';
export default {
  components: {
    editGrade
  },
  data() {
    return {
      TeachingMode: '',
      tableLoading: false,
      currentPage: 1,
      HasScheduledCourse: '',
      totalPage: 0,
      Api_GET_ClubClassQO: new Api_GET_ClubClassQO(),
      CreateClassInput: new CreateClassInput(),
      tableData: [{

      }]
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    this.type();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取班级列表
    type(page) {
      this.tableLoading = true;
      this.Api_GET_ClubClassQO.IncludeCourse = true;
      this.Api_GET_ClubClassQO.IncludeClassStudent = true;
      this.Api_GET_ClubClassQO.TeachingMode = this.TeachingMode;
      this.Api_GET_ClubClassQO.HasScheduledCourse = this.HasScheduledCourse ? this.HasScheduledCourse : '';
      this.Api_GET_ClubClassQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubClassQO.Page = page || 1;
      this.Api_GET_ClubClassQO.SkipCount = (this.Api_GET_ClubClassQO.Page - 1) * this.Api_GET_ClubClassQO.MaxResultCount;
      api_GET_ClubClass(this.Api_GET_ClubClassQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 新建班级
    addGrade() {
      // this.$router.push({ 'name': 'EditGrade' });
      this.$router.push({ 'query': { }});
      this.$refs.EditGrade.dialogVisible = true;
      this.$refs.EditGrade.title = '新建班级';
      this.$refs.EditGrade.course2 = [];
      this.$refs.EditGrade.addcourse = '';
      this.$refs.EditGrade.CreateClassInput = new CreateClassInput();
    },
    // 编辑班级
    edit(row) {
      console.log(row);
      this.$router.push({ 'query': { 'id': row.id, 'classname': row.name }});
      this.$refs.EditGrade.dialogVisible = true;
      this.$refs.EditGrade.title = '编辑班级';
    },
    // 排课信息
    addarr(row) {
      this.$router.push({ 'name': 'ArrangingTypeList', 'query': { 'name': 'ArrangingList', 'id': row.id, 'classname': row.name }});
    },
    // 签到信息
    sign(row) {
      this.$router.push({ 'name': 'ArrangingTypeList', 'query': { 'name': 'SignList', 'id': row.id, 'classname': row.name }});
    },
    // 学员信息
    student(row) {
      this.$router.push({ 'name': 'ArrangingTypeList', 'query': { 'name': 'StudentList', 'id': row.id, 'classname': row.name }});
    },
    // 删除班级
    deleteClasss(row) {
      this.$confirm(`您确定要删除 ${row.name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_ClubClassId(row.id).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.type();
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubClassQO.MaxResultCount = MaxResultCount;
      this.type();
    },
    pageIndexChange(currentPage) {
      this.type(currentPage);
    },
    // 重置QO
    reset () {
      this.Api_GET_ClubClassQO = new Api_GET_ClubClassQO();
      this.HasScheduledCourse = '';
      this.TeachingMode = '';
      this.type();
    }
  }

};
</script>

<style>

</style>
